import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Spin, Button } from 'antd'
// 导入actionCreator
import { add, sub, asyncMsg } from '../redux/store'
export default function Count() {
  // useSelector返回什么,count就接收到什么
  const { c, hosname, isShow } = useSelector((state) => {
    // 注意: 此时state出现红色波浪线是ts的问题,暂时忽略,最后讲
    return {
      c: state.count.c,
      hosname: state.count.msg.hospital.hosname,
      isShow: state.count.isShow,
    }
  })

  const dispatch = useDispatch()
  return (
    <div>
      <p>{c}</p>
      <div>{isShow ? <Spin /> : <p>{hosname}</p>}</div>
      <Button
        onClick={() => {
          dispatch(add(5))
          //   add(5)的返回值: {type: 'xxx/add',payload: 5}
        }}
      >
        +
      </Button>
      <Button
        onClick={() => {
          dispatch(sub(2))
          //  sub(2)的返回值: {type: 'xxx/sub',payload: 2}
        }}
      >
        -
      </Button>
      <Button
        onClick={() => {
          // 此时asyncMsg出现红色波浪线是ts检查问题,暂时忽略
          dispatch(asyncMsg())
        }}
      >
        给服务器发请求获取数据
      </Button>
    </div>
  )
}
